<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>路线附图列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 100%;
            margin: 0 auto;
        }
        .table {
            font-size: 14px;
        }
        .table th, .table td {
            padding: 8px;
        }
    </style>
</head>
<body>
<div class="container cus-container">
    <div>
        <!-- 搜索框 -->
        <div id="search-route-map" style="float: left; margin: 10px 0px;">
            <form class="form-inline" action="${pageContext.request.contextPath}/route_map/list" method="get">
                <div class="form-group">
                    <label for="route_id">路线ID</label>
                    <input type="text" name="route_id" class="form-control" id="route_id" value="${param.routeId}">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
                <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
            </form>
        </div>

        <!-- 操作按钮 -->
        <div style="float: right; margin: 10px 0px;">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/route_map/add">添加附图</a>
            <a class="btn btn-danger" onclick="deleteSelected()">删除选中</a>
        </div>
    </div>

    <!-- 数据表格 -->
    <table class="table table-bordered table-hover clearfix" id="route-map-list">
        <thead>
            <tr class="bg-primary">
                <th><input type="checkbox" id="selectAll"></th>
                <th>ID</th>
                <th>路线ID</th>
                <th>图片预览</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="map" items="${pageInfo.list}">
                <tr>
                    <td><input type="checkbox" name="id" value="${map.route_map_id}"></td>
                    <td>${map.route_map_id}</td>
                    <td>${map.route_id}</td>
                    <td><img src="<%=Res.fileUrl%>${map.route_img_url}" width="100" alt=附图预览"></td>
                    <td class="text-center">${map.route_map_order}</td>
                    <td>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/route_map/huixian?route_map_id=${map.route_map_id}">编辑</a>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/route_map/delete?route_map_id=${map.route_map_id}">删除</a>

                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <!-- 分页导航 -->
    <div>
        <nav style="float: left;">
            <ul class="pagination">
                <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/route_map/list?currentPage=1&pageSize=${pageInfo.pageSize}&route_id=${param.route_id}" aria-label="First">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/route_map/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&route_id=${param.route_id}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                <c:if test="${startPage < 1}">
                    <c:set var="startPage" value="1" />
                </c:if>
                <c:set var="endPage" value="${startPage + 9}" />
                <c:if test="${endPage > pageInfo.pages}">
                    <c:set var="endPage" value="${pageInfo.pages}" />
                    <c:if test="${endPage - startPage + 1 < 10}">
                        <c:set var="startPage" value="${endPage - 9}" />
                        <c:if test="${startPage < 1}">
                            <c:set var="startPage" value="1" />
                        </c:if>
                    </c:if>
                </c:if>
                <c:forEach begin="${startPage}" end="${endPage}" var="i">
                    <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                        <a href="${pageContext.request.contextPath}/route_map/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&route_id=${param.route_id}">${i}</a>
                    </li>
                </c:forEach>
                <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/route_map/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&route_id=${param.route_id}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/route_map/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&route_id=${param.route_id}" aria-label="Last">
                        <span aria-hidden="true">尾页</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div style="float: right; margin-top: 25px;">
            <span>当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据</span>
            每页显示
            <select name="pageSize" onchange="changePageSize(this.value)">
                <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
            </select>条数据
        </div>
    </div>
</div>
</div>

<script>
// 清空搜索框
function clearSearch() {
    document.getElementById("searchRouteId").value = "";
    document.getElementById("searchMapName").value = "";
    window.location.href = "${pageContext.request.contextPath}/route_map/list";
}

// 改变每页显示条数
function changePageSize(pageSize) {
    var currentPage = ${pageInfo.pageNum};
    window.location.href = "${pageContext.request.contextPath}/route_map/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&routeId=${param.routeId}&mapName=${param.mapName}";
}

// 全选/取消全选
document.getElementById("selectAll").addEventListener("click", function() {
    var checkboxes = document.querySelectorAll("#route-map-list tbody input[type='checkbox']");
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = document.getElementById("selectAll").checked;
    });
});

// 删除选中
function deleteSelected() {
    if (confirm("确认删除选中项吗？")) {
        var ids = [];
        document.querySelectorAll("#route-map-list tbody input[type='checkbox']:checked").forEach(function(checkbox) {
            ids.push(checkbox.value);
        });
        if (ids.length > 0) {
            window.location.href = "${pageContext.request.contextPath}/route_map/deleteBatch?ids=" + ids.join(",");
        } else {
            alert("请先选择要删除的项");
        }
    }
}
</script>
</body>
</html>
